<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
                xmlns:h="http://java.sun.com/jsf/html"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../templates/StakeholderPortalTemplate.xhtml">

    <link href="./../resources/css/default.css" rel="stylesheet" type="text/css" />
    <link href="./../resources/css/tableLayout.css" rel="stylesheet" type="text/css" />

    <ui:define name="content">
        <f:view beforePhase="#{addBranchManagedBean.initView}" >
            <h:form>
                <p:panel id="branchAddNewBranchPanel" header="#{bundle['branch.addnewbranch.panel']}">
                    <p:messages id="statusMessages" redisplay="false" />
                    <p:tabView id="addNewBranchTabView" dynamic="false">
                        <p:tab id="branchContactInformationTab" title="#{bundle['branch.contactinfo.tab']}">
                            <h:panelGrid columns="1" cellpadding="10">
                                <h:outputLabel id="branchContactInfoNote" style="font-weight: bold; font-size: medium; color: red" value="#{bundle['branch.contactinfo.note']}" />
                            </h:panelGrid>  

                            <table>
                                <tr height="45px">
                                    <td width="20%">
                                        <h:outputLabel id="branchNameLabel" style="font-weight: bold" value="#{bundle['branch.name.label']}:" />
                                        <h:outputLabel style="font-weight: bold; color: red" value="*" />
                                    </td>
                                    <td>
                                        <h:inputText id="branchNameTextBox" required="true" requiredMessage="#{bundle['branch.name.required']}" value="#{addBranchManagedBean.fnbBranch.branchName}" size="25" validator="#{addBranchManagedBean.validateBranchName}"/>
                                    </td>
                                    <td>
                                        <p:message for="branchNameTextBox" />
                                    </td>
                                </tr>
                                <tr height="45px">
                                    <td>
                                        <h:outputLabel id="branchStreetNameLabel" style="font-weight: bold" value="#{bundle['branch.streetname.label']}:"/>
                                        <h:outputLabel style="font-weight: bold; color: red" value="*" />
                                    </td>
                                    <td>
                                        <h:inputText id="streetNameTextBox" required="true" requiredMessage="#{bundle['branch.streetname.required']}" value="#{addBranchManagedBean.fnbBranch.branchAddress.streetName}" size="25"/>                
                                    </td>
                                    <td>
                                        <p:message for="streetNameTextBox" />
                                    </td>
                                </tr>

                                <tr height="45px">
                                    <td>
                                        <h:outputLabel id="branchUnitNumberLabel" style="font-weight: bold" value="#{bundle['branch.unitnumber.label']}:"/>
                                    </td>
                                    <td>
                                        <h:inputText id="branchUnitNumberTextBox" size="10" value="#{addBranchManagedBean.fnbBranch.branchAddress.unitNumber}" />
                                        <h:outputLabel style="font-size: small" value="(e:g: #02-45, #02-45/46/47)" />
                                    </td>
                                    <td>
                                        <p:message for="branchUnitNumberTextBox" />
                                    </td>
                                </tr>

                                <tr height="45px">
                                    <td>
                                        <h:outputLabel id="branchBlockNumberLabel" style="font-weight: bold" value="#{bundle['branch.blocknumber.label']}:"/>
                                    </td>     
                                    <td>
                                        <h:inputText id="branchBlockNumberTextBox" value="#{addBranchManagedBean.fnbBranch.branchAddress.blkNumber}" size="10"/>                       
                                    </td>
                                    <td>
                                        <p:message for="branchBlockNumberTextBox" />         
                                    </td>
                                </tr>

                                <tr height="45px">
                                    <td>
                                        <h:outputLabel id="branchBuildingNameLabel" style="font-weight: bold" value="#{bundle['branch.buildingname.label']}:"/>
                                    </td>
                                    <td>                            
                                        <h:inputText id="branchBuildingNameTextBox" value="#{addBranchManagedBean.fnbBranch.branchAddress.buildingName}"/>       
                                    </td>
                                    <td>
                                        <p:message for="branchBuildingNameTextBox" />
                                    </td>
                                </tr>

                                <tr height="45px">
                                    <td>
                                        <h:outputLabel id="branchPostalCodeLabel" style="font-weight: bold" value="#{bundle['branch.postalcode.label']}:" />
                                        <h:outputLabel style="font-weight: bold; color: red" value="*" />
                                    </td>
                                    <td>
                                        <p:inputMask id="branchPostalCodeTextBox" required="true" requiredMessage="#{bundle['branch.postalcode.required']}" value="#{addBranchManagedBean.fnbBranch.branchAddress.postalCode}" mask="999999" size="6"/>  
                                    </td>
                                    <td>
                                        <p:message for="branchPostalCodeTextBox" />
                                    </td>
                                </tr>

                                <tr height="45px">
                                    <td>
                                        <h:outputLabel id="branchContactNumberLabel" style="font-weight: bold" value="#{bundle['branch.contactnumber.label']}:" /> 
                                        <h:outputLabel style="font-weight: bold; color: red" value="*" />
                                    </td>
                                    <td>
                                        <p:inputMask id="branchContactNumberTextBox" required="true" requiredMessage="#{bundle['branch.contactnumber.required']}" value="#{addBranchManagedBean.fnbBranch.contactNumber}" mask="(999)-99999999"/>  
                                    </td>
                                    <td>
                                        <p:message for="branchContactNumberTextBox" />
                                    </td>
                                </tr>

                                <tr height="45px">
                                    <td>
                                        <h:outputLabel id="branchContactPersonLabel" style="font-weight: bold" value="#{bundle['branch.contactperson.label']}:" />
                                        <h:outputLabel style="font-weight: bold; color: red" value="*" />
                                    </td>
                                    <td>
                                        <h:inputText id="branchContactPersonTextBox" required="true" requiredMessage="#{bundle['branch.contactperson.required']}" value="#{addBranchManagedBean.fnbBranch.contactPerson}"/>
                                    </td>
                                    <td>
                                        <p:message for="branchContactPersonTextBox" />
                                    </td>
                                </tr>

                                <tr height="45px">
                                    <td>
                                        <h:outputLabel id="branchEmailAddressLabel" style="font-weight: bold" value="#{bundle['branch.emailaddress.label']}:"/>
                                        <h:outputLabel style="font-weight: bold; color: red" value="*" />
                                    </td>
                                    <td>
                                        <h:inputText id="branchEmailAddressTextBox" required="true" requiredMessage="#{bundle['branch.emailaddress.required']}" size="25" value="#{addBranchManagedBean.fnbBranch.emailAddress}" validator="#{addBranchManagedBean.validateEmail}" validatorMessage="Invalid Email" />
                                        <h:outputLabel style="font-size: small" value="(e:g kenneth@hotmail.com)" />
                                    </td>
                                    <td>
                                        <p:message for="branchEmailAddressTextBox"/>
                                    </td>
                                </tr>
                            </table>
                        </p:tab>

                        <p:tab id="branchNatureOfBusinessTab" title="#{bundle['branch.natureofbusiness.tab']}">
                            <table>
                                <tr height="45px" align="left">
                                    <td width="30%">
                                        <h:outputLabel id="branchCuisineTypesLabel" style="font-weight: bold" value="#{bundle['branch.cuisinetypes.label']}:" />
                                        <h:outputLabel style="font-weight: bold; color: red" value="*" />
                                    </td>
                                    <td>
                                        <h:selectManyCheckbox id="branchCuisineTypesSelectManyCheckbox" layout="pageDirection" required="true" requiredMessage="#{bundle['branch.cuisinetypes.required']}" value="#{addBranchManagedBean.cuisineTypeList}" converter="cuisineTypeConverter">
                                            <f:selectItems id="branchCuisineTypesSelectItems" value="#{enumCuisineType.listItems}" />
                                        </h:selectManyCheckbox>
                                    </td>
                                    <td>
                                        <p:message for="branchCuisineTypesSelectManyCheckbox"/>
                                    </td>
                                </tr>

                                <tr height="45px">
                                    <td>
                                        <h:outputLabel id="branchFnbTypeLabel" style="font-weight: bold" value="#{bundle['branch.fnbtype.label']}:" />       
                                        <h:outputLabel style="font-weight: bold; color: red" value="*" />
                                    </td>
                                    <td>
                                        <h:selectOneMenu id="branchFnbTypeSelectOneMenu" required="true" requiredMessage="#{bundle['branch.fnbtype.required']}" value="#{addBranchManagedBean.fnbBranch.fnBType}"  converter="fnbTypeConverter" >
                                            <f:selectItems id="branchFnbTypeSelectItems" value="#{enumFnbType.listItems}" />
                                        </h:selectOneMenu>
                                    </td>
                                    <td>
                                        <p:message for="branchFnbTypeSelectOneMenu"/>
                                    </td>
                                </tr>

                                <tr height="45px">
                                    <td>
                                        <h:outputLabel id="branchHalalTypeLabel" style="font-weight: bold" value="#{bundle['branch.halaltype.label']}:"/>   
                                        <h:outputLabel style="font-weight: bold; color: red" value="*" />
                                    </td>
                                    <td>
                                        <h:selectOneRadio id="branchHalalTypeSelectOneRadio" required="true" requiredMessage="#{bundle['branch.halaltype.required']}" value="#{addBranchManagedBean.fnbBranch.isHalal}" converter="halalTypeConverter" >
                                            <f:selectItems id="branchHalalTypeSelectItems" value="#{enumHalalType.listItems}" />
                                        </h:selectOneRadio>
                                    </td>
                                    <td>
                                        <p:message for="branchHalalTypeSelectOneRadio"/>
                                    </td>
                                </tr>

                                <tr height="45px">
                                    <td>
                                        <h:outputLabel id="branchPriceRangeLabel" style="font-weight: bold" value="#{bundle['branch.pricerange.label']}:"/>
                                        <h:outputLabel style="font-weight: bold; color: red" value="*" />
                                    </td>
                                    <td>
                                        <h:selectOneMenu id="branchPriceRangeSelectOneMenu" requiredMessage="#{bundle['branch.pricerange.required']}" required="true" value="#{addBranchManagedBean.fnbBranch.priceRange}" converter="priceRangeConverter" >
                                            <f:selectItems id="branchPriceRangeSelectItems" value="#{enumPriceRange.listItems}"/>
                                        </h:selectOneMenu>
                                    </td>
                                    <td>
                                        <p:message for="branchPriceRangeSelectOneMenu" />
                                    </td>
                                </tr>
                            </table>
                        </p:tab>

                        <p:tab id="branchOperatingHoursTab" title="#{bundle['branch.operatinghours.tab']}">
                            <h:panelGrid columns="1" cellpadding="10">
                                <h:outputLabel id="branchOperatingHoursNotes" style="font-weight: bold; font-size: medium; color: red" value="#{bundle['branch.operatinghours.note']}" />
                            </h:panelGrid>

                            <h:panelGrid columns="8" cellpadding="10">

                                <h:outputLabel id="branchOperatingDayLabel" style="font-weight: bold" value ="#{bundle['branch.operatingday.label']}: "/>
                                <h:selectOneMenu id="branchOperatingDaySelectOneMenu" requiredMessage="#{bundle['branch.operatingday.required']}" required="true" value="#{addBranchManagedBean.normalOperatingDay}" converter="operatingDayConverter">
                                    <f:selectItems id="branchOperatingDaySelectItems" value="#{enumOperatingDay.listItems}"/>
                                </h:selectOneMenu>

                                <h:outputLabel id="branchOperatingHoursLabel" style="font-weight: bold" value ="#{bundle['branch.operatinghours.label']}: "/>
                                <h:selectOneMenu binding="#{operatingHoursTimeStart}" id="branchOperatingTimeStartSelectOneMenu" value="#{addBranchManagedBean.openingHours}" converter="operatingHoursConverter">
                                    <f:selectItems id="branchOperatingTimeStartSelectItems" value="#{enumOperatingHours.listItems}"/>
                                </h:selectOneMenu>

                                <h:outputLabel id="branchOperatingTimeEndLabel" style="font-weight: bold" value="#{bundle['branch.to.label']}"/>
                                <h:selectOneMenu id="branchOperatingTimeEndSelectOneMenu" value="#{addBranchManagedBean.closingHours}" converter="operatingHoursConverter" >
                                    <f:selectItems id="branchOperatingTimeEndSelectItems" value="#{enumOperatingHours.listItems}"/>
                                </h:selectOneMenu>

                                <p:commandButton id="branchAddOperatingHoursButton" value="#{bundle['branch.addoperatinghours.button']}" process="@this branchOperatingDaySelectOneMenu, branchOperatingTimeStartSelectOneMenu, branchOperatingTimeEndSelectOneMenu" update="statusMessages branchOperatingHoursDataTable" ajax="true" actionListener="#{addBranchManagedBean.addOperatingHours}" style="width:150px" />
                                <p:message for="branchAddOperatingHoursButton"/> 
                            </h:panelGrid>


                            <h:panelGrid columns="1" cellpadding="10" id="branchOperatingHoursPanelGrid">
                                <p:dataTable var="branchOperatingHours" value="#{addBranchManagedBean.operatingHrsList}" id="branchOperatingHoursDataTable" style="width:80%" >  

                                    <p:column headerText="#{bundle['branch.operatingday.label']}" >
                                        <h:outputText value="#{branchOperatingHours.operatingDayEnum}" converter="operatingDayConverter"/>  
                                    </p:column>

                                    <p:column headerText="#{bundle['branch.openinghours.headerText']}" >
                                        <h:outputText value="#{branchOperatingHours.openingHoursEnum}" converter="operatingHoursConverter" />  
                                    </p:column>

                                    <p:column headerText="#{bundle['branch.closinghours.headerText']}" >
                                        <h:outputText value="#{branchOperatingHours.closingHoursEnum}" converter="operatingHoursConverter" />  
                                    </p:column>

                                    <p:column>
                                        <p:commandButton id="removeOperatingHoursButton" value="#{bundle['branch.removeoperatinghours.button']}" update="statusMessages branchOperatingHoursDataTable" ajax="false" immediate="true" process="@this branchOperatingHoursDataTable" actionListener="#{addBranchManagedBean.removeOperatingHoursList(branchOperatingHours)}" style="width:100px" image="ui-icon ui-icon-trash" />
                                    </p:column>  
                                </p:dataTable>
                            </h:panelGrid>

                            <h:panelGrid columns="2" cellpadding="10">
                                <h:outputLabel id="branchOperatingHoursRemarksLabel" style="font-weight: bold" value="#{bundle['branch.operatinghoursremarks.label']}:"/>
                                <p:inputTextarea id="branchOperatingHoursInputTextArea" style="width:300px;height:100px;" effectDuration="400" value="#{addBranchManagedBean.operatingHoursRemarks}"/>  
                            </h:panelGrid>
                        </p:tab>

                        <p:tab id="branchExtendedOperatingHoursTab" title="#{bundle['branch.extendedoperatinghours.tab']}">

                            <h:panelGrid columns="1" cellpadding="10">
                                <h:outputLabel id="branchExtendedOperatingHoursNote" style="font-weight: bold; font-size: medium; color: red" value="#{bundle['branch.extendedoperatinghours.note']}" />
                            </h:panelGrid>

                            <h:panelGrid columns="8" cellpadding="10">
                                <h:outputLabel id="branchExtendedDateLabel" style="font-weight: bold" value ="#{bundle['branch.extendeddate.label']}: "/>
                                <p:calendar id="branchExtendedCalendarDate" value="#{addBranchManagedBean.extendedCalendarDate}" pattern="yyyy-MM-dd" />

                                <h:outputLabel id="branchExtendedTimeStartLabel" style="font-weight: bold" value="#{bundle['branch.extendedtime.label']}: "/>
                                <h:selectOneMenu binding="#{extendedTimeStart}" id="branchExtendedTimeStartSelectOneMenu" value="#{addBranchManagedBean.extendedTimeStart}" converter="operatingHoursConverter">
                                    <f:selectItems id="branchExtendedTimeStartSelectItems" value="#{enumOperatingHours.listItems}"/>
                                </h:selectOneMenu>

                                <h:outputLabel id="branchExtendedTimeEndLabel" style="font-weight: bold" value="#{bundle['branch.to.label']}"/>
                                <h:selectOneMenu id="branchExtendedTimeEndSelectOneMenu" value="#{addBranchManagedBean.extendedTimeEnd}" converter="operatingHoursConverter" >
                                    <f:selectItems id="branchExtendedTimeEndSelectItems" value="#{enumOperatingHours.listItems}"/>
                                </h:selectOneMenu>

                                <p:commandButton id="branchAddSpecificDateButton" value="#{bundle['branch.addspecificdate.button']}" process="@this branchExtendedCalendarDate, branchExtendedTimeStartSelectOneMenu, branchExtendedTimeEndSelectOneMenu" update="statusMessages branchExtendedDateDataTable" ajax="true" actionListener="#{addBranchManagedBean.addSpecificDateList}" style="width:150px" />
                                <p:message for="branchAddSpecificDateButton"/> 
                            </h:panelGrid>

                            <h:panelGrid columns="1" cellpadding="10" id="branchExtendedDatePanelGrid">
                                <p:dataTable var="branchExtendedDate" value="#{addBranchManagedBean.extendedOperatingHoursList}" id="branchExtendedDateDataTable" style="width:350px" >  
                                    <p:column headerText="#{bundle['branch.extendeddate.label']}" >
                                        <h:outputText value="#{branchExtendedDate.specificDate}" >
                                            <f:convertDateTime type="date" pattern="dd-MM-yyyy" timeZone="GMT+8:00" />
                                        </h:outputText>
                                    </p:column>

                                    <p:column headerText="#{bundle['branch.extendedoperatingday.label']}" >
                                        <h:outputText value="#{branchExtendedDate.operatingDayEnum}" converter="operatingDayConverter"/>  
                                    </p:column>

                                    <p:column headerText="#{bundle['branch.extendedstarttime.label']}" >
                                        <h:outputText value="#{branchExtendedDate.openingHoursEnum}" converter="operatingHoursConverter" />  
                                    </p:column>

                                    <p:column headerText="#{bundle['branch.extendedendtime.label']}" >
                                        <h:outputText value="#{branchExtendedDate.closingHoursEnum}" converter="operatingHoursConverter" />  
                                    </p:column>

                                    <p:column>
                                        <p:commandButton id="removeSpecificDateButton" value="#{bundle['branch.removespecificDate.button']}" update="statusMessages branchExtendedDateDataTable" ajax="false" immediate="true" process="@this branchExtendedDateDataTable" actionListener="#{addBranchManagedBean.removeSpecificDateList(branchExtendedDate)}" style="width:100px" image="ui-icon ui-icon-trash" />
                                    </p:column>  
                                </p:dataTable>
                            </h:panelGrid>
                        </p:tab>
                    </p:tabView>

                    <p:ajaxStatus style="width:16px;height:16px;">
                        <f:facet name="start">
                            <h:graphicImage value="/images/ajaxloading.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>
                    <p:commandButton id="branchAddNewButton" value="#{bundle['branch.addnew.button']}" update="statusMessages addNewBranchTabView" ajax="true" actionListener="#{addBranchManagedBean.saveNewBranch}"/>
                    <p:commandButton id="branchResetAllButton" value="#{bundle['branch.resetall.button']}" type="reset"/>
                </p:panel>
            </h:form>
        </f:view>
    </ui:define>
</ui:composition>
